<template>
  <div class="brandTitle">
    <mm-header></mm-header>
    <div class="brandTitle-container">
      <div class="container-title">
        <router-link to="/">首页</router-link>
        >
        <router-link to="/category">全部分类</router-link>
        >
        <a href="#"></a>
        >
        <button class="fr mui-btn-xs">筛选</button>
      </div>
      <div class="hotNav">
        <h3>热门品牌排行</h3>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-for="item in list" :key="item.brandTitleId">
              <router-link :to="'/brandSonList/brandtitleid='+item.brandTitleId+'&brandTitle='+item.brandTitle"
              class="mui-navigate-right"
              >{{item.brandTitle}}
              </router-link >
          </li>
      </ul>
      </div>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmHeader from "./publicComponents/mmHeader.vue"
import mmFooter from "./publicComponents/mmFooter.vue"
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.$http.get('api/getbrandtitle').then((res) => {
        // console.log()
        this.list = res.body.result
        console.log(this.list)
      })
    }
  },
  components: {
    mmHeader,
    mmFooter
  }
};
</script>
<style lang="less" scoped>
@import "../../src/less/var";
  .brandTitle {
    position: relative;
    .container-title {
      padding-left: 25/@base;
      height: 76/@base;
      line-height: 76/@base;
      color: #000;
      font-size: 26/@base;
      background-color: #f5f5f5;
      a {
        color: #000;
        // text-decoration: underline;
      }
      .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
        padding: 8/@base 28/@base;
        font-size: 26/@base;
        margin-top: 8/@base;
        color: #000;
        background-color: #ccc;
      }
    }
    .hotNav {
      h3 {
        font-size: 30/@base;
        line-height: 1.5;
        text-align: center;
      }
      .mui-navigate-right {
        font-size: 24/@base;
      }
    }
  }
</style>
